<script setup lang="ts" name="Home">
import { Search } from '@element-plus/icons-vue';
import ApiCard from '@/components/ApiCard.vue'
import { useHomeStore } from '@/stores';
import { storeToRefs } from 'pinia';
// 使用pinia进行数据管理
const homeStore = useHomeStore()
const { searchContent, apiInfoList } = storeToRefs(homeStore)
const { searchClick, } = homeStore

</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="search">
      <!-- 搜索框 -->
      <el-input class="el-input" v-model="searchContent" placeholder="请输入api名称、描述、类型、创建人名称…" size="default" @keyup.enter="searchClick()">
        <template #append>
          <el-button :icon="Search" @click="searchClick()" />
        </template>
      </el-input>
    </div>
    <!-- 推荐 -->
    <div class="api-suggest">
      <div class="api-card">
        <div v-for="apiInfo in apiInfoList" :key="apiInfo">
          <ApiCard :apiInfo="apiInfo" />
        </div>
      </div>
    </div>
  </div>


</template>
<style scoped>
.search {
  height: 150px;
  background-color: skyblue;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  /** 使其在y轴中心 */
}

.search .el-input {
  width: 400px;
  text-align: center;
}

.api-suggest {
  margin: 50px 150px;
  padding: 20px;
}

.api-card {
  display: flex;
  flex-wrap: wrap;
  gap: 80px
}

</style>